// https://github.com/vueComponent/ant-design-vue-pro/commit/8f7600143be405cf8de6c950070ac7a80abb1235
// vue.config.js for less-loader@5.0.0
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const { generate } = require('@ant-design/colors')

const { modifyVars } = require('./src/themeUtil')

module.exports = {
  css: {
    loaderOptions: {
      less: {
        /* less 变量覆盖，用于自定义 ant design 主题 */
        // If you are using less-loader@5 please spread the lessOptions to options directly
        modifyVars: modifyVars('#1890ff'),
        javascriptEnabled: true
      }
    }
  },
  configureWebpack: config => {
    config.plugins.push(
      new ThemeColorReplacer({
        fileName: 'css/theme-colors-[contenthash:8].css',
        matchColors: getAntdSerials('#1890ff') // 主色系列
      })
    )
  },
}


function getAntdSerials (color) {
  var lightens = new Array(9).fill().map((t, i) => {
    console.log(t)
    return ThemeColorReplacer.varyColor.lighten(color, i / 10)
  })
  const colorPalettes = generate(color)
  const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',')
  return lightens.concat(colorPalettes).concat(rgb)
}